import type { Component } from "solid-js"
import type { TodoItem } from "../../src/index.d"
import "./index.css"

const CopTodoItem: Component<{
  index: number
  item: TodoItem
  removeTodoEvent: (index: number) => void
  todoCheckStatusChangeEvent: () => void
}> = props => {
  const removeTodo = () => {
    props.removeTodoEvent(props.index)
  }
  const todoCheckStatusChange = () => {
    props.item.isCheck = !props.item.isCheck
    props.todoCheckStatusChangeEvent()
  }
  return (
    <div class="item">
      <input
        type="checkbox"
        name={props.item.name}
        id={props.item.name}
        value={props.item.name}
        checked={props.item.isCheck}
        onChange={todoCheckStatusChange}
      />
      <label for={props.item.name}>{props.item.name}</label>
      <button onclick={removeTodo}>删除</button>
    </div>
  )
}

export default CopTodoItem
